<template>
  <div class="demo">
    <div class="demo-title">箭头指向</div>
    <div class="demo-content">
      <Space>
        <Popover placement="topLeft">
          <template #content>
            <p>Content</p>
            <p>Content</p>
          </template>
          <template #title>
            <span>Title</span>
          </template>
          <Button>Align edge / 边缘对齐</Button>
        </Popover>
        <Popover placement="topLeft" arrow-point-at-center>
          <template #content>
            <p>Content</p>
            <p>Content</p>
          </template>
          <template #title>
            <span>Title</span>
          </template>
          <Button>Arrow points to center / 箭头指向中心</Button>
        </Popover>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Space from '@sscd/space';
  import Button from '@sscd/button';
  import Popover from '@sscd/popover';
</script>
